<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>资讯列表 - 多种筛选功能</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #f5f5f5;
            padding-bottom: 60px;
        }
        
        /* 导航栏样式 */
        .top-nav {
            background-color: white;
            padding: 12px 16px;
            border-bottom: 1px solid #eee;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: white;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: space-around;
            padding: 8px 0;
            z-index: 100;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #666;
            text-decoration: none;
            font-size: 10px;
        }
        
        .nav-item.active {
            color: #2563eb;
        }
        
        .nav-item i {
            font-size: 20px;
            margin-bottom: 4px;
        }
        
        /* 筛选区域 */
        .filter-container {
            background-color: white;
            padding: 10px 16px;
            border-bottom: 1px solid #eee;
            position: sticky;
            top: 57px; /* 顶部导航高度 */
            z-index: 99;
        }
        
        .search-box {
            position: relative;
            margin-bottom: 10px;
        }
        
        .search-box input {
            width: 100%;
            padding: 8px 16px 8px 38px;
            border-radius: 20px;
            border: 1px solid #eee;
            font-size: 14px;
            background-color: #f5f5f5;
        }
        
        .search-box i {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
        }
        
        .filter-tabs {
            display: flex;
            overflow-x: auto;
            padding-bottom: 5px;
            scrollbar-width: none;
        }
        
        .filter-tabs::-webkit-scrollbar {
            display: none;
        }
        
        .filter-tab {
            padding: 6px 12px;
            background-color: #f5f5f5;
            border-radius: 16px;
            font-size: 13px;
            margin-right: 8px;
            white-space: nowrap;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .filter-tab.active {
            background-color: #2563eb;
            color: white;
        }
        
        .filter-dropdowns {
            display: flex;
            gap: 8px;
            margin-top: 8px;
        }
        
        .filter-select {
            flex: 1;
            padding: 6px 12px;
            border-radius: 6px;
            border: 1px solid #eee;
            font-size: 13px;
            background-color: white;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M8 11l4-4H4l4 4z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 8px center;
        }
        
        /* 资讯卡片基础样式 */
        .news-card {
            background-color: white;
            border-radius: 10px;
            margin: 0 10px 12px;
            overflow: hidden;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        }
        
        /* 资讯头部 */
        .news-header {
            padding: 12px 16px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .source-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 10px;
        }
        
        .source-info {
            flex: 1;
        }
        
        .source-name {
            font-weight: 600;
            font-size: 14px;
            margin-bottom: 1px;
        }
        
        .publish-time {
            font-size: 12px;
            color: #999;
        }
        
        /* 资讯内容 */
        .news-content {
            padding: 12px 16px;
        }
        
        .news-title {
            font-size: 16px;
            font-weight: 600;
            line-height: 1.4;
            margin-bottom: 8px;
            color: #1a1a1a;
        }
        
        .news-summary {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
            margin-bottom: 12px;
        }
        
        /* 图片容器样式 */
        .news-images {
            margin-bottom: 12px;
            border-radius: 6px;
            overflow: hidden;
        }
        
        /* 无图样式 - 增加内边距 */
        .no-image .news-content {
            padding-bottom: 16px;
        }
        
        /* 单图样式 */
        .single-image {
            width: 100%;
        }
        
        .single-image img {
            width: 100%;
            height: auto;
            display: block;
        }
        
        /* 多图样式 */
        .multi-images {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 3px;
        }
        
        .multi-images img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        
        /* 双图样式 */
        .two-images {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3px;
        }
        
        .two-images img {
            width: 100%;
            height: 140px;
            object-fit: cover;
            display: block;
        }
        
        /* 资讯底部 */
        .news-footer {
            padding: 8px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #f0f0f0;
            font-size: 12px;
            color: #999;
        }
        
        .news-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 12px;
        }
        
        .news-tag {
            background-color: #f5f5f5;
            color: #666;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            text-decoration: none;
        }
        
        .action-buttons {
            display: flex;
            gap: 16px;
        }
        
        .action-btn {
            display: flex;
            align-items: center;
            color: #999;
            text-decoration: none;
        }
        
        .action-btn i {
            margin-right: 4px;
            font-size: 14px;
        }
        
        .action-btn:hover {
            color: #2563eb;
        }
        
        /* 空状态和加载状态 */
        .empty-state, .loading-state {
            padding: 40px 20px;
            text-align: center;
            color: #999;
        }
        
        .empty-state i, .loading-state i {
            font-size: 40px;
            margin-bottom: 16px;
            opacity: 0.5;
        }
        
        .loading-state i {
            animation: spin 1.5s linear infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* 筛选结果提示 */
        .filter-result {
            padding: 12px 16px;
            font-size: 13px;
            color: #666;
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav d-flex justify-content-between align-items-center">
        <h5 class="mb-0">资讯动态</h5>
        <div class="d-flex">
            <button class="btn btn-link p-1 text-dark" id="filter-toggle">
                <i class="fas fa-sliders"></i>
            </button>
            <button class="btn btn-link p-1 text-dark ms-2">
                <i class="fas fa-cog"></i>
            </button>
        </div>
    </div>
    
    <!-- 筛选区域 -->
    <div class="filter-container" id="filter-panel">
        <!-- 搜索框 -->
        <div class="search-box">
            <i class="fas fa-search"></i>
            <input type="text" placeholder="搜索资讯、话题或来源..." id="search-input">
        </div>
        
        <!-- 分类标签筛选 -->
        <div class="filter-tabs">
            <div class="filter-tab active" data-category="all">全部</div>
            <div class="filter-tab" data-category="technology">科技</div>
            <div class="filter-tab" data-category="business">财经</div>
            <div class="filter-tab" data-category="culture">文化</div>
            <div class="filter-tab" data-category="travel">旅游</div>
            <div class="filter-tab" data-category="health">健康</div>
            <div class="filter-tab" data-category="education">教育</div>
        </div>
        
        <!-- 高级筛选下拉框 -->
        <div class="filter-dropdowns">
            <select class="filter-select" id="time-filter">
                <option value="all">全部时间</option>
                <option value="today">今天</option>
                <option value="week">本周</option>
                <option value="month">本月</option>
                <option value="year">今年</option>
            </select>
            
            <select class="filter-select" id="sort-filter">
                <option value="latest">最新发布</option>
                <option value="hot">热门优先</option>
                <option value="commented">评论最多</option>
                <option value="read">阅读最多</option>
            </select>
        </div>
    </div>
    
    <!-- 筛选结果提示 -->
    <div class="filter-result" id="filter-result">
        显示全部资讯（共 24 条）
    </div>
    
    <!-- 资讯列表 -->
    <div class="news-list" id="news-container">
        <!-- 1. 科技资讯（单图） -->
        <article class="news-card" data-category="technology" data-time="today" data-hot="87">
            <div class="news-header">
                <img src="https://picsum.photos/id/237/100/100" alt="资讯来源" class="source-avatar">
                <div class="source-info">
                    <div class="source-name">科技日报</div>
                    <div class="publish-time">2小时前 · 3.2万阅读</div>
                </div>
                <button class="btn btn-link p-1 text-dark">
                    <i class="fas fa-ellipsis-h"></i>
                </button>
            </div>
            
            <div class="news-content">
                <h3 class="news-title">我国成功发射新一代通信技术试验卫星，多项技术实现突破</h3>
                <div class="news-summary">
                    今日凌晨，我国在西昌卫星发射中心使用长征三号乙运载火箭，成功将新一代通信技术试验卫星发射升空。此次发射的卫星采用了多项新技术，将为我国通信网络建设提供重要支撑...
                </div>
                
                <div class="news-images">
                    <div class="single-image">
                        <img src="https://picsum.photos/id/180/800/400" alt="卫星发射">
                    </div>
                </div>
                
                <div class="news-tags">
                    <a href="#" class="news-tag">科技</a>
                    <a href="#" class="news-tag">航天</a>
                    <a href="#" class="news-tag">国内新闻</a>
                </div>
            </div>
            
            <div class="news-footer">
                <div>评论 128</div>
                <div class="action-buttons">
                    <a href="#" class="action-btn">
                        <i class="far fa-thumbs-up"></i>
                        <span>568</span>
                    </a>
                    <a href="#" class="action-btn">
                        <i class="far fa-comment"></i>
                        <span>评论</span>
                    </a>
                    <a href="#" class="action-btn">
                        <i class="far fa-share-square"></i>
                        <span>分享</span>
                    </a>
                </div>
            </div>
        </article>
        
        <!-- 2. 财经资讯（无图） -->
        <article class="news-card no-image" data-category="business" data-time="week" data-hot="65">
            <div class="news-header">
                <img src="https://picsum.photos/id/24/100/100" alt="资讯来源" class="source-avatar">
                <div class="source-info">
                    <div class="source-name">环球财经</div>
                    <div class="publish-time">5小时前 · 7.8万阅读</div>
                </div>
                <button class="btn btn-link p-1 text-dark">
                    <i class="fas fa-ellipsis-h"></i>
                </button>
            </div>
            
            <div class="news-content">
                <h3 class="news-title">全球数字经济论坛在京开幕，聚焦数字技术与实体经济融合</h3>
                <div class="news-summary">
                    全球数字经济论坛今日在北京开幕，来自30多个国家和地区的代表参会。本次论坛以"数字赋能未来"为主题，探讨数字技术如何更好地与实体经济融合，推动全球经济高质量发展...
                </div>
                
                <div class="news-tags">
                    <a href="#" class="news-tag">经济</a>
                    <a href="#" class="news-tag">数字经济</a>
                    <a href="#" class="news-tag">论坛</a>
                </div>
            </div>
            
            <div class="news-footer">
                <div>评论 342</div>
                <div class="action-buttons">
                    <a href="#" class="action-btn">
                        <i class="far fa-thumbs-up"></i>
                        <span>1256</span>
                    </a>
                    <a href="#" class="action-btn">
                        <i class="far fa-comment"></i>
                        <span>评论</span>
                    </a>
                    <a href="#" class="action-btn">
                        <i class="far fa-share-square"></i>
                        <span>分享</span>
                    </a>
                </div>
            </div>
        </article>
        
        <!-- 3. 旅游资讯（双图） -->
        <article class="news-card" data-category="travel" data-time="week" data-hot="92">
            <div class="news-header">
                <img src="https://picsum.photos/id/91/100/100" alt="资讯来源" class="source-avatar">
                <div class="source-info">
                    <div class="source-name">城市旅游报</div>
                    <div class="publish-time">昨天 14:30 · 5.1万阅读</div>
                </div>
                <button class="btn btn-link p-1 text-dark">
                    <i class="fas fa-ellipsis-h"></i>
                </button>
            </div>
            
            <div class="news-content">
                <h3 class="news-title">国内首条跨省旅游高铁专线开通，串联多地著名景点</h3>
                <div class="news-summary">
                    国内首条跨省旅游高铁专线今日正式开通运营，该专线连接了5个省份的12个著名旅游城市，全程运行时间比原来缩短近一半，将极大方便游客出行...
                </div>
                
                <div class="news-images">
                    <div class="two-images">
                        <img src="https://picsum.photos/id/1039/400/300" alt="高铁列车">
                        <img src="https://picsum.photos/id/1061/400/300" alt="沿线风景">
                    </div>
                </div>
                
                <div class="news-tags">
                    <a href="#" class="news-tag">旅游</a>
                    <a href="#" class="news-tag">交通</a>
                    <a href="#" class="news-tag">高铁</a>
                </div>
            </div>
            
            <div class="news-footer">
                <div>评论 217</div>
                <div class="action-buttons">
                    <a href="#" class="action-btn">
                        <i class="far fa-thumbs-up"></i>
                        <span>892</span>
                    </a>
                    <a href="#" class="action-btn">
                        <i class="far fa-comment"></i>
                        <span>评论</span>
                    </a>
                    <a href="#" class="action-btn">
                        <i class="far fa-share-square"></i>
                        <span>分享</span>
                    </a>
                </div>
            </div>
        </article>
        
        <!-- 4. 文化资讯（三图） -->
        <article class="news-card" data-category="culture" data-time="month" data-hot="76">
            <div class="news-header">
                <img src="https://picsum.photos/id/65/100/100" alt="资讯来源" class="source-avatar">
                <div class="source-info">
                    <div class="source-name">文化周刊</div>
                    <div class="publish-time">3天前 · 9.4万阅读</div>
                </div>
                <button class="btn btn-link p-1 text-dark">
                    <i class="fas fa-ellipsis-h"></i>
                </button>
            </div>
            
            <div class="news-content">
                <h3 class="news-title">国家级非遗展览在博物馆开展，展示传统工艺的现代传承</h3>
                <div class="news-summary">
                    为期一个月的国家级非物质文化遗产展览今日在国家博物馆开展，展览汇集了来自全国各地的150多件非遗作品，既有传统技艺的经典之作，也有融入现代设计的创新作品...
                </div>
                
                <div class="news-images">
                    <div class="multi-images">
                        <img src="https://picsum.photos/id/1082/300/300" alt="非遗展品1">
                        <img src="https://picsum.photos/id/175/300/300" alt="非遗展品2">
                        <img src="https://picsum.photos/id/306/300/300" alt="非遗展品3">
                    </div>
                </div>
                
                <div class="news-tags">
                    <a href="#" class="news-tag">文化</a>
                    <a href="#" class="news-tag">非遗</a>
                    <a href="#" class="news-tag">展览</a>
                </div>
            </div>
            
            <div class="news-footer">
                <div>评论 456</div>
                <div class="action-buttons">
                    <a href="#" class="action-btn">
                        <i class="far fa-thumbs-up"></i>
                        <span>2153</span>
                    </a>
                    <a href="#" class="action-btn">
                        <i class="far fa-comment"></i>
                        <span>评论</span>
                    </a>
                    <a href="#" class="action-btn">
                        <i class="far fa-share-square"></i>
                        <span>分享</span>
                    </a>
                </div>
            </div>
        </article>
        
        <!-- 5. 健康资讯（单图） -->
        <article class="news-card" data-category="health" data-time="month" data-hot="58">
            <div class="news-header">
                <img src="https://picsum.photos/id/177/100/100" alt="资讯来源" class="source-avatar">
                <div class="source-info">
                    <div class="source-name">健康生活</div>
                    <div class="publish-time">1周前 · 12.7万阅读</div>
                </div>
                <button class="btn btn-link p-1 text-dark">
                    <i class="fas fa-ellipsis-h"></i>
                </button>
            </div>
            
            <div class="news-content">
                <h3 class="news-title">专家建议：每天坚持30分钟中等强度运动，有益心血管健康</h3>
                <div class="news-summary">
                    最新发布的《国民健康指南》指出，每天坚持30分钟中等强度运动可以显著降低心血管疾病风险。健康专家建议选择快走、游泳、骑自行车等适合自己的运动方式...
                </div>
                
                <div class="news-images">
                    <div class="single-image">
                        <img src="https://picsum.photos/id/160/800/400" alt="健康运动">
                    </div>
                </div>
                
                <div class="news-tags">
                    <a href="#" class="news-tag">健康</a>
                    <a href="#" class="news-tag">运动</a>
                    <a href="#" class="news-tag">养生</a>
                </div>
            </div>
            
            <div class="news-footer">
                <div>评论 876</div>
                <div class="action-buttons">
                    <a href="#" class="action-btn">
                        <i class="far fa-thumbs-up"></i>
                        <span>3421</span>
                    </a>
                    <a href="#" class="action-btn">
                        <i class="far fa-comment"></i>
                        <span>评论</span>
                    </a>
                    <a href="#" class="action-btn">
                        <i class="far fa-share-square"></i>
                        <span>分享</span>
                    </a>
                </div>
            </div>
        </article>
    </div>
    
    <!-- 空状态（默认隐藏） -->
    <div class="empty-state" id="empty-state" style="display: none;">
        <i class="fas fa-search"></i>
        <h5>未找到相关资讯</h5>
        <p>尝试调整筛选条件或搜索关键词</p>
    </div>
    
    <!-- 加载状态（默认隐藏） -->
    <div class="loading-state" id="loading-state" style="display: none;">
        <i class="fas fa-circle-notch"></i>
        <p>正在加载资讯...</p>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-newspaper"></i>
            <span>资讯</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-plus-circle"></i>
            <span>发布</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-bell"></i>
            <span>通知</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user"></i>
            <span>我的</span>
        </a>
    </div>

    <!-- Bootstrap 5 JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const filterPanel = document.getElementById('filter-panel');
            const filterToggle = document.getElementById('filter-toggle');
            const searchInput = document.getElementById('search-input');
            const filterTabs = document.querySelectorAll('.filter-tab');
            const timeFilter = document.getElementById('time-filter');
            const sortFilter = document.getElementById('sort-filter');
            const newsContainer = document.getElementById('news-container');
            const newsCards = document.querySelectorAll('.news-card');
            const emptyState = document.getElementById('empty-state');
            const loadingState = document.getElementById('loading-state');
            const filterResult = document.getElementById('filter-result');
            
            // 筛选面板切换
            filterToggle.addEventListener('click', function() {
                if (filterPanel.style.display === 'none' || !filterPanel.style.display) {
                    filterPanel.style.display = 'block';
                } else {
                    filterPanel.style.display = 'none';
                }
            });
            
            // 存储当前筛选条件
            let currentFilters = {
                category: 'all',
                time: 'all',
                search: '',
                sort: 'latest'
            };
            
            // 执行筛选
            function applyFilters() {
                // 显示加载状态
                showLoading();
                
                // 模拟加载延迟
                setTimeout(() => {
                    let visibleCount = 0;
                    const searchTerm = currentFilters.search.toLowerCase();
                    
                    // 筛选新闻
                    newsCards.forEach(card => {
                        const category = card.dataset.category;
                        const time = card.dataset.time;
                        const title = card.querySelector('.news-title').textContent.toLowerCase();
                        const summary = card.querySelector('.news-summary') ? card.querySelector('.news-summary').textContent.toLowerCase() : '';
                        const tags = Array.from(card.querySelectorAll('.news-tag')).map(tag => tag.textContent.toLowerCase()).join(' ');
                        
                        // 检查是否符合所有筛选条件
                        const categoryMatch = currentFilters.category === 'all' || category === currentFilters.category;
                        const timeMatch = currentFilters.time === 'all' || time === currentFilters.time;
                        const searchMatch = searchTerm === '' || 
                                           title.includes(searchTerm) || 
                                           summary.includes(searchTerm) || 
                                           tags.includes(searchTerm);
                        
                        // 应用筛选
                        if (categoryMatch && timeMatch && searchMatch) {
                            card.style.display = 'block';
                            visibleCount++;
                        } else {
                            card.style.display = 'none';
                        }
                    });
                    
                    // 排序新闻
                    sortNews();
                    
                    // 更新结果计数
                    updateResultCount(visibleCount);
                    
                    // 显示空状态或隐藏
                    if (visibleCount === 0) {
                        showEmptyState();
                    } else {
                        hideEmptyState();
                    }
                    
                    // 隐藏加载状态
                    hideLoading();
                }, 500);
            }
            
            // 排序新闻
            function sortNews() {
                const visibleCards = Array.from(newsCards).filter(card => card.style.display !== 'none');
                
                if (visibleCards.length <= 1) return;
                
                // 根据当前排序条件排序
                switch(currentFilters.sort) {
                    case 'hot':
                        visibleCards.sort((a, b) => b.dataset.hot - a.dataset.hot);
                        break;
                    case 'commented':
                        visibleCards.sort((a, b) => {
                            const aComments = parseInt(a.querySelector('.news-footer div:first-child').textContent.replace('评论 ', ''));
                            const bComments = parseInt(b.querySelector('.news-footer div:first-child').textContent.replace('评论 ', ''));
                            return bComments - aComments;
                        });
                        break;
                    case 'read':
                        visibleCards.sort((a, b) => {
                            const aReads = parseInt(a.querySelector('.publish-time').textContent.match(/(\d+\.?\d*)\万阅读/)[1]) * 10000;
                            const bReads = parseInt(b.querySelector('.publish-time').textContent.match(/(\d+\.?\d*)\万阅读/)[1]) * 10000;
                            return bReads - aReads;
                        });
                        break;
                    case 'latest':
                    default:
                        // 默认按时间排序（DOM中已按时间顺序排列）
                        break;
                }
                
                // 重新排列DOM
                visibleCards.forEach(card => {
                    newsContainer.appendChild(card);
                });
            }
            
            // 更新结果计数
            function updateResultCount(count) {
                let filterText = `显示 `;
                
                if (currentFilters.category !== 'all') {
                    const categoryName = Array.from(filterTabs).find(tab => tab.dataset.category === currentFilters.category).textContent;
                    filterText += `${categoryName} `;
                }
                
                if (currentFilters.time !== 'all') {
                    const timeText = timeFilter.options[timeFilter.selectedIndex].text;
                    filterText += `${timeText} `;
                }
                
                if (currentFilters.search) {
                    filterText += `包含"${currentFilters.search}" `;
                }
                
                if (currentFilters.sort !== 'latest') {
                    const sortText = sortFilter.options[sortFilter.selectedIndex].text;
                    filterText += `(${sortText}) `;
                }
                
                filterText += `资讯（共 ${count} 条）`;
                filterResult.textContent = filterText;
            }
            
            // 显示/隐藏加载状态
            function showLoading() {
                loadingState.style.display = 'block';
                newsContainer.style.display = 'none';
                emptyState.style.display = 'none';
            }
            
            function hideLoading() {
                loadingState.style.display = 'none';
                newsContainer.style.display = 'block';
            }
            
            // 显示/隐藏空状态
            function showEmptyState() {
                emptyState.style.display = 'block';
                newsContainer.style.display = 'none';
            }
            
            function hideEmptyState() {
                emptyState.style.display = 'none';
                newsContainer.style.display = 'block';
            }
            
            // 分类标签点击事件
            filterTabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    // 更新激活状态
                    filterTabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 更新筛选条件
                    currentFilters.category = this.dataset.category;
                    
                    // 应用筛选
                    applyFilters();
                });
            });
            
            // 时间筛选下拉框变化事件
            timeFilter.addEventListener('change', function() {
                currentFilters.time = this.value;
                applyFilters();
            });
            
            // 排序筛选下拉框变化事件
            sortFilter.addEventListener('change', function() {
                currentFilters.sort = this.value;
                applyFilters();
            });
            
            // 搜索框输入事件
            searchInput.addEventListener('input', function() {
                currentFilters.search = this.value.trim();
                applyFilters();
            });
            
            // 点赞按钮交互
            document.querySelectorAll('.action-btn .fa-thumbs-up').forEach(icon => {
                const btn = icon.closest('.action-btn');
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    const countEl = this.querySelector('span');
                    
                    if (icon.classList.contains('far')) {
                        // 未点赞状态
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        this.style.color = '#2563eb';
                        countEl.textContent = parseInt(countEl.textContent) + 1;
                    } else {
                        // 已点赞状态
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        this.style.color = '';
                        countEl.textContent = parseInt(countEl.textContent) - 1;
                    }
                });
            });
            
            // 初始化页面
            applyFilters();
        });
    </script>
</body>
</html>

